import { FC, useEffect, useState, memo } from 'react';
import { useModel } from 'umi';

import Image from '@/components/Image';
import InTable from '@/components/InTable';
import { Input } from 'antd';

import styles from './style.less';
import classnames from 'classnames';

import closeBtn from '@/assets/close_btn.png';

const tab_config: any[] = [
  {
    title: '企业',
  },
  {
    title: '园区楼宇',
  },
];

const company_columns: any[] = [
  {
    title: '序号',
    dataIndex: '',
    render: (_: any, record: any, index: number) => (
      <span
        style={{
          color: '#0ff',
        }}
      >
        {index + 1}
      </span>
    ),
    width: 138,
    align: 'center',
  },
  {
    title: '企业名称',
    dataIndex: 'name',
    align: 'left',
  },
  {
    title: '操作',
    dataIndex: '',
    render: (_: any, record: any) => (
      <>
        <span className={styles.table_btn}>查看详情</span>
        <span className={styles.table_btn}>地图</span>
      </>
    ),
    width: 200,
    align: 'center',
  },
];
const house_columns: any[] = [
  {
    title: '序号',
    dataIndex: '',
    render: (_: any, record: any, index: number) => (
      <span
        style={{
          color: '#0ff',
        }}
      >
        {index + 1}
      </span>
    ),
    width: 138,
    align: 'center',
  },
  {
    title: '园区/楼宇名称',
    dataIndex: 'name',
    align: 'left',
  },
  {
    title: '操作',
    dataIndex: '',
    render: (_: any, record: any) => (
      <>
        <span className={styles.table_btn}>查看详情</span>
        <span className={styles.table_btn}>地图</span>
      </>
    ),
    width: 200,
    align: 'center',
  },
];

interface Iprops {
  visible: boolean;
  onClose: () => void;
}

const SearchModel: FC<Iprops> = (props) => {
  const { onClose, visible } = props;
  const [selfVisible, setSelfVisible] = useState<boolean>(false);
  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const [companyInput, setCompanyInput] = useState<string>('');
  const [houseInput, setHouseInput] = useState<string>('');
  const [pageNo1, setPageNo1] = useState<number>(1);
  const [pageNo2, setPageNo2] = useState<number>(1);
  const { companyData, houseData, getData } = useModel('search');
  const toGetData = () => {
    getData({
      type: currentIndex,
      name: currentIndex === 0 ? companyInput : houseInput,
      pageNo: currentIndex === 0 ? pageNo1 : pageNo2,
      pageSize: 10,
    });
  };
  useEffect(() => {
    // alert(11);
  }, []);
  useEffect(() => {
    const inter = setTimeout(() => {
      setSelfVisible(visible);
    }, 200);
    return () => {
      clearTimeout(inter);
    };
  }, [visible]);
  return selfVisible || visible ? (
    <div className={styles.search_container}>
      <div
        className={classnames(
          styles.content,
          visible && selfVisible ? styles.open : null,
        )}
      >
        <Image src={closeBtn} className={styles.close_btn} onClick={onClose} />
        <p className={styles.title}>智能搜索</p>
        <div className={styles.top_handler}>
          <div className={styles.tab_warp}>
            {tab_config.map((item: any, index: number) => (
              <div
                key={item.title}
                className={classnames(
                  styles.tab_item,
                  index === currentIndex ? styles.actived : null,
                )}
                onClick={() => {
                  setCurrentIndex(index);
                  setCompanyInput('');
                  setHouseInput('');
                }}
              >
                <span>{item.title}</span>
              </div>
            ))}
          </div>
          <div className={styles.input_warp}>
            {currentIndex === 0 ? (
              <Input.Search
                bordered={false}
                className={styles.table_input}
                placeholder="请输入企业名称"
                value={companyInput}
                onChange={(e: any) => {
                  const v: string = e.target.value;
                  setCompanyInput(v);
                }}
                onPressEnter={() => {
                  setPageNo1(1);
                  toGetData();
                }}
              />
            ) : (
              <Input.Search
                bordered={false}
                className={styles.table_input}
                placeholder="请输入园区或楼宇名称"
                value={houseInput}
                onChange={(e: any) => {
                  const v: string = e.target.value;
                  setHouseInput(v);
                }}
                onPressEnter={() => {
                  setPageNo2(1);
                  toGetData();
                }}
              />
            )}
          </div>
        </div>
        <div className={styles.table_content}>
          {currentIndex === 0 ? (
            <InTable
              currentPage={pageNo1}
              total={10}
              columns={company_columns}
              dataSource={companyData}
              onChange={(i) => {
                setPageNo1(i);
                toGetData();
              }}
            />
          ) : (
            <InTable
              currentPage={pageNo2}
              total={10}
              columns={house_columns}
              dataSource={houseData}
              onChange={(i) => {
                setPageNo2(i);
                toGetData();
              }}
            />
          )}
        </div>
      </div>
    </div>
  ) : null;
};

export default memo(SearchModel);
